<template>
  <div class="window-control" @click="toggleMaximize">
    <el-tooltip :content="isMaximized ? '最小化' : '最大化'" placement="bottom">
      <el-icon :size="18">
        <FullScreen v-if="!isMaximized" />
        <CopyDocument v-else />
      </el-icon>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FullScreen, CopyDocument } from '@element-plus/icons-vue'

const isMaximized = ref(false)

const toggleMaximize = () => {
  isMaximized.value = !isMaximized.value
  const appElement = document.querySelector('.app-layout')
  if (appElement) {
    appElement.classList.toggle('maximized', isMaximized.value)
  }
}
</script>

<style scoped>
.window-control {
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    background-color: rgba(0, 0, 0, 0.025);
  }
}
</style>
